<template>
  <div className="my">
    <NavBar title="我的"></NavBar>
    <div class="my__order">
      <div class="my__order-top" @click="navToOrder(0)">
        <div class="top__left">我的订单</div>
        <div class="top__right">
          <div class="top__right-span">
            查看全部订单
          </div>
          <div class="top__right-right">
            <van-icon name="arrow" size="8px" color="#9B9B9B"/>
          </div>
        </div>
      </div>
      <div class="my__order-bottom">
        <div class="bottom__item" @click="navToOrder(1)">
          <img src="@/assets/my/awaitPay.png" alt="">
          <span>已提交</span>
        </div>
        <div class="bottom__item" @click="navToOrder(2)">
          <img src="@/assets/my/awaitCheck.png" alt="">
          <span>已审核</span>
        </div>
        <div class="bottom__item" @click="navToOrder(3)">
          <img src="@/assets/my/awaitSend.png" alt="">
          <span>已发货</span>
        </div>
        <div class="bottom__item" @click="navToOrder(4)">
          <img src="@/assets/my/success.png" alt="">
          <span>已完成</span>
        </div>
      </div>

    </div>
    <div class="my__bottom">
      <img class="my__bottom-left" @click="router.push('/MyLikeList')" src="@/assets/my/myLike.png"/>
      <img class="my__bottom-right" @click=" router.push(`/Bus`)" src="@/assets/my/payBus.png"/>

    </div>
  </div>
</template>

<script setup>
import NavBar from "@/components/NavBar/index.vue"
import {useRouter} from "vue-router";
const router=useRouter();
const navToOrder=(val)=>{
  router.push(`/Order/${val}`)
}
</script>

<style lang="less" scoped>
.my {
  width: 375px;
  overflow:hidden;
  &__order {
    width: 348px;
    margin: 0 auto;
    margin-top: 20px;
    height: 118px;
    background: #FFFFFF;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.08);
    border-radius: 8px;

    .top {
      &__left {
        font-size: 12px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
      }

      &__right {
        display: flex;
        font-size: 10px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9B9B9B;

        &-span {
          margin-right: 10px;
        }
      }
    }

    &-top {
      height: 31px;
      align-items: center;
      box-sizing: border-box;
      padding: 0px 14px;
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      font-weight: 500;
      color: #000000;
      border-bottom: 2px solid;
      border-bottom-color: #EFEFEF;
    }
    &-bottom{
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 19px 33px 11px 33px;
      .bottom{
        &__item{
          display: flex;
          flex-direction: column;
          align-items: center;
          //justify-content: center;
          img{
            width: 33px;
            margin-bottom: 4px;
          }
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
        }
      }
    }
  }
  &__bottom{
    display: flex;
    justify-content: center;
    &-left{
      width: 180px;
      transform: scale(1.2);
      //flex: 1;
    }
    &-right{
      width: 180px;
      transform: scale(1.2);
      //flex: 2;
    }
  }
}
</style>